{#
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from 'macros-protocol.html' import split %}
{% from "products/vpn/includes/macros.html" import vpn_resource_center_cta with context %}

{% extends "products/vpn/base.html" %}

{% set _utm_source = 'www.mozilla.org-vpn-product-page' %}
{% set _utm_campaign = 'resource-center' %}
{% set _params = '?utm_source=' ~ _utm_source ~ '&utm_medium=referral&utm_campaign=' ~ _utm_campaign %}

{% block page_css %}
  {{ css_bundle('protocol-split')}}
  {{ css_bundle('vpn-resource-center')}}
{% endblock page_css %}

{% block page_title%}{% block article_title %}{% endblock article_title %}{% endblock page_title%}

{% block site_header %}
  {% with
    custom_nav_cta=vpn_resource_center_cta(
      referral_id='vpn-resource-center-article',
      link_text=ftl('vpn-shared-subscribe-link'),
      alt_link_text=ftl('vpn-shared-waitlist-link'),
      class_name='mzp-c-button mzp-t-secondary mzp-t-md',
    )
  %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block content %}
<nav class="mzp-c-breadcrumb">
  <ol class="mzp-c-breadcrumb-list">
    <li class="mzp-c-breadcrumb-item">
      <a href="{{ url('products.vpn.resource-center.landing') }}">{{ ftl('vpn-resource-center-title') }}</a>
    </li>
    <li class="mzp-c-breadcrumb-item">
      {{ self.article_title() }}
    </li>
  </ol>
</nav>
<div class="vpn-article-container">
  <div class="mzp-l-content mzp-t-content-md">
      <article class="mzp-c-article vpn-article">
        {# Categories will be used at some point but not yet #}
        {# <p class="vpn-article-category">{% block article_category %}{{ self.article_category().capitalize() }}{% endblock %}</p> #}
        <h2>{{ self.article_title() }}</h2>
        {% block vpn_article %}{% endblock vpn_article %}
      </article>
    <div class="vpn-c-vote no-js">
      <h3>{{ ftl('vpn-resource-center-was-this-article') }}</h3>
      <div class="vpn-c-vote-btn-container">
        <button type="button" data-cta-text="{% block article_slug %}{% endblock %}" class="vpn-c-vote-btn up">
          <span>{{ ftl('vpn-resource-center-article-helpful') }}</span>
          <svg width="42" height="38" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M36.54 13.104h2.184A3.277 3.277 0 0 1 42 16.38v17.473a3.277 3.277 0 0 1-3.276 3.276H36.54a3.277 3.277 0 0 1-3.276-3.276V16.38a3.277 3.277 0 0 1 3.276-3.276ZM5.38 10.752c-3.669 0-6.261 3.595-5.1 7.076l4.48 13.44a5.375 5.375 0 0 0 5.1 3.677h19.036V15.238L24.19 8.063l-2.264-6.796A1.857 1.857 0 0 0 20.166 0h-.007a4.032 4.032 0 0 0-4.032 4.032v5.914l-.806.806H5.38Z" fill="currentColor"/>
          </svg>
        </button>
        <button type="button" data-cta-text="{{ self.article_slug() }}" class="vpn-c-vote-btn down">
          <span>{{ ftl('vpn-resource-center-article-not-helpful') }}</span>
          <svg width="42" height="38" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.46 24.024H3.276A3.277 3.277 0 0 1 0 20.748V3.276A3.277 3.277 0 0 1 3.276 0H5.46a3.277 3.277 0 0 1 3.276 3.276v17.472a3.277 3.277 0 0 1-3.276 3.276ZM36.62 26.377c3.67 0 6.262-3.595 5.1-7.077L37.24 5.86a5.375 5.375 0 0 0-5.1-3.676H13.106v19.707l4.704 7.174 2.265 6.797c.253.756.96 1.267 1.76 1.267h.007a4.032 4.032 0 0 0 4.031-4.032v-5.914l.806-.806h9.942Z" fill="currentColor"/>
          </svg>
        </button>
      </div>
    </div>
    </div>
  <div>

  {% if related_articles %}

  <div class="mzp-l-content mzp-l-card-third">
    <hr class="vpn-article-hr">
    <h3>{{ ftl('vpn-resource-center-related-posts') }}</h3>
    <div class="mzp-l-card-third">
      {% for article in related_articles %}
        {% include "products/vpn/resource-center/includes/vpn-article-card.html"%}
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% call split(
    image=resp_img(
      url='img/products/vpn/resource-center/resource_center_split_2_2x.jpg',
      optional_attributes={
        'class': 'mzp-c-split-media-asset'
      }
    ),
    block_class='mzp-t-content-lg',
  ) %}
    <h2 class="resource-center-cta-title">{{ ftl('vpn-resource-center-obsessed-with') }}</h2>
      {{ vpn_resource_center_cta(
        referral_id='vpn-resource-center-article',
        link_text=ftl('vpn-shared-subscribe-link'),
        alt_link_text=ftl('vpn-shared-waitlist-link'),
        class_name='mzp-c-button mzp-t-product',
      ) }}
  {% endcall %}
{% endblock content %}

{% block js %}
  {{ super() }}
  {{ js_bundle("vpn-resource-center-article") }}
{% endblock js %}
